<div class="main">
	<div class="container">
		<div style="background:#fff;min-height: 800px; margin: 20px 0;display: flex;">
			<div class="user_center_left">
				{include file="common/sidenav"}
			</div>
			<div class="user_center_right">
				<div class="user_center_right_hd">
					个人信息
				</div>
				<div class="user_center_right_bd" style="display: flex;align-items: center;justify-content: center;">
					<div class="center_form">
						<div style="text-align:center; margin-bottom: 15px;" id="ID-upload-demo-btn1">
							<div
								style="width:120px;height:120px;border-radius:100%;overflow:hidden; margin:0 auto 10px;">
								<img id="image" src="{$user.avatar}" style="width:100%;height:100%;" />
								<input type="hidden" name="avatar" id="avatar" value="{$user.avatar}" />
							</div>
							点击更换
						</div>
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">昵称</label>
								<div class="layui-input-block">
									<input type="text" name="nickname" id="nickname" value="{$user.nickname}" lay-verify="required"
										placeholder="请输入" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">年龄</label>
								<div class="layui-input-block">
									<input type="number" min="18" max="99" value="{$user.age}" id="age" lay-verify="required"
										placeholder="请输入" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-block">
									<input type="radio" name="gender" value="0" title="男"
										{if($user.gender==0)}checked{/if}>
									<input type="radio" name="gender" value="1" title="女"
										{if($user.gender==1)}checked{/if}>
								</div>
							</div>
						</form>
						<div class="btn" style="margin-top:30px;">
							<button type="button"
								class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-normal layui-btn-radius"
								onclick="submit()">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var layer;
	layui.use(function() {
		var upload = layui.upload;
		var form = layui.form;
		layer = layui.layer;
		// 单图片上传
		var uploadInst = upload.render({
			elem: '#ID-upload-demo-btn1',
			url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
			before: function(obj) {
				// 预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result) {
					$('#image').attr('src', result); // 图片链接（base64）
				});

				//layer.msg('上传中', {icon: 16, time: 0});
			},
			done: function(res) {
				console.log(res);
				// 若上传失败
				if (res.code != 1) {
					return layer.msg(res.msg);
					return false;
				}
				// 上传成功的一些操作
				$('#avatar').val(res.data.url);
			}

		});

	});



	function submit() {
		if ($('#avatar').val().trim() == '') {
			layer.msg('请上传头像', {
				icon: 5
			});
			return false;
		}
		if ($('#nickname').val().trim() == '') {
			layer.msg('请填写昵称', {
				icon: 5
			});
			return false;
		}

		$.ajax({
			type: "POST",
			url: "/api.php/user/set_info",
			dataType: "json",
			data: {
				"avatar": $('#avatar').val(),
				"nickname": $('#nickname').val(),
				"gender": $('input[name="gender"]:checked').val(),
				"age": $('#age').val(),
			},
			success: function(res) {
				console.log(res);

				if (res.code == 0) {
					layer.msg(res.msg, {
						icon: 5
					});

				} else {
					layer.msg(res.msg, {
						icon: 6
					}, function() {

						window.location.href = "{:url('user/index')}";
					});
				}
			}
		});

	}
</script>